<template>
    <div>
        <headers />
        <div class="container">
            <div>
                <div class="userCenterWarp">
                    <div class="userCenterTitle">个人中心</div>
                    <el-row :gutter="30">
                        <el-col :span="4">
                            <sideNav />
                        </el-col>
                        <el-col :span="20" class="mt-30">
                            <div class="header flex space-between">
                                <div class="nav">
                                    <span :class="{ active: active === 3 }" @click="slected(3)">
                                        系统通知
                                        <em v-if="active === 3">({{ list.length}}条)</em>
                                    </span>
                                    <span :class="{ active: active === 1 }" @click="slected(1)">
                                        消息回复
                                        <em v-if="active === 1">({{ list.length }}条)</em>
                                    </span>
                                </div>
                                <div>
                                    <el-link type="danger" :underline="false" @click="handleConfirm">一键已读</el-link>
                                </div>
                            </div>
                            <div v-loading="loading">
                                <messageItem v-for="item in list" :key="item.id" :item="item" />
                            </div>

                            <div class="text-center mt-30">
                                <el-pagination @current-change="handleCurrentChange" :current-page="params.page"
                                    :page-size="params.pagesize" :page-sizes="[10, 20, 30, 40]"
                                    layout="total, prev, pager, next" :total="total" hide-on-single-page>
                                </el-pagination>
                            </div>

                            <el-empty v-if="isEmpty" description="暂无数据"></el-empty>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import headers from '@/components/header.vue'
import sideNav from './components/sideNav.vue'
import messageItem from './components/messageItem.vue'

import { getSysNoticeList, getMsgReplyList, msgReplyRead } from '@/api/apis'
export default {
    name: 'profile',
    components: {
        headers,
        sideNav,
        messageItem
    },
    data () {
        return {
            active: 3, // 1论坛2评价3公告
            loading: true,
            list: [],
            isEmpty: false,
            total: 0, // 总条数
            params: {
                page: 1, // 当前页
                pagesize: 10, // 每页条数
                lastPage: 1, // 最后一页
            }
        }
    },
    created () {
        this.getList()
    },
    methods: {
        slected (e) {
            this.active = e
            this.getList();
        },
        // 已读全部
        handleConfirm(){
            let that = this;
            this.$confirm('确定已读全部通知吗？')
                .then(_ => {
                    that.handleReadAll()
                })
        },
        handleReadAll(){
            msgReplyRead({
                type: this.active
            }).then(res => {
                if(res.code === 1) {
                    this.$message.success(res.msg);
                }
            })
        },
        handleCurrentChange (val) {
            this.params.page = val
            this.getList()
        },
        getList(){
            let that = this
            that.loading = true;
            let res = null;
            if (this.active === 1) {
                // 回复消息列表
                res = getMsgReplyList();
            }
            if (this.active === 3) {
                // 系统消息列表
                res = getSysNoticeList();
            }
            res.then(res => {
                if (res.code === 1) {
                    that.list = res.data.data
                    that.total = res.data.total
                    //that.params.pagesize = Number(res.data.per_page)
                    that.params.lastPage = res.data.last_page
                    that.isEmpty = !that.list.length
                } else {
                    that.$message.error(res.msg)
                }
                that.loading = false;
            })
        }
    },
}
</script>

<style scoped lang="less">
.nav {
    >span {
        display: inline-block;
        font-size: 18px;
        color: rgba(51, 51, 51, .6);
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        font-weight: 700;
        em {
            font-style: normal;
            font-size: 14px;
            color: #999;
        }
        &+span {
            margin-left: 30px;
        }

        &.active {
            color: #333;
        }
    }
}
</style>